<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>上传多个文件示例</title>

    <%--<link rel="stylesheet" href="<%=request.getContextPath()%>/resources/css/main.css" type="text/css" />--%>
    <script
            src="${pageContext.request.contextPath}/web/js/jquery-1.8.1.min.js"></script>
    <script
            src="${pageContext.request.contextPath}/web/js/jquery-form.js"></script>
</head>
<body>



<form id="uploadForm" name="uploadForm" enctype="multipart/form-data"
      method="POST">
    请选择：<input type="file" name="image" id="img" multiple>

    <div id="c"></div>
    <button class="btn" type="button" id="doSave">提交</button>
</form>

<script  type="text/javascript">
    $(function() {
        $("#doSave")
            .click(
                function() {
                    $("#uploadForm").ajaxSubmit(
                        {
                            url : "${pageContext.request.contextPath}/upload",
                            type : "POST",
                            dataType : "json",
                            contentType : "application/x-www-form-urlencoded; charset=utf-8",
                            success : function(data) {
                                if (data.msg == '上传失败') {
                                    alert(data.msg);
                                } else if (data.msg == '请选择文件') {
                                    alert("上传文件不能为空");
                                } else if (data.msg == '只能上传图片啊亲!') {
                                    alert(data.msg);
                                } else if (data.msg == '图片过大') {
                                    alert(data.msg);
                                } else {
                                    $("#c").empty();
                                    $.each(data, function(index, item) {
                                        $("#c").append('<img id=img' + index.substr(index.length - 1, index.length) +
                                            ' src="' + '${pageContext.request.contextPath}'
                                            + item + '" style="width: 300px;height: 300px;   ">')
                                            .append("<a id='del'"
                                                + index + ""
                                                + " href='javascript:delpic("
                                                + index.substr(index.length - 1, index.length)
                                                + ");' class='upload-img-del"
                                                + index.substr(index.length - 1, index.length) + "'>删除</a>");
                                    });
                                }
                            }
                        });
                });
    });

</script>

</body>
</html>